<template>
<div class="AxisFrom"> 
  <div id="RadarGraphic"  ></div>
</div>

</template>

<script>

export default {

props:{

 fun:{

type:Function,

 },

title:{

type:String,

default:''

 }

 },

data(){ 

return {

colors:['#5793f3', '#d14a61', '#675bba'],
height:document.body.clientHeight/5,
width: document.body.clientWidth/8

}

},
watch:{
 width(val){
   // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    if(!this.timer){
        // 一旦监听到的width值改变，就将其重新赋给data里的width
        this.width = val
        this.timer = true
        let that = this
        that.Chart()
        setTimeout(function(){
            // 打印width变化的值
            // eslint-disable-next-line no-console
            // console.log(that.width)
            that.timer = false
        },400)
    }
 },
 height(val){
         // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
    if(!this.timer){
        // 一旦监听到的width值改变，就将其重新赋给data里的height
        this.height = val
        this.timer = true
        let that = this
        that.Chart()
        setTimeout(function(){
            // 打印height变化的值
            // eslint-disable-next-line no-console
            // console.log(that.height)
            that.timer = false
        },400)
    }
 }

},
components: {

},

computed: {

evenNumbers: function () {

return this.key.filter(function (number) {

return number % 3 === 0

})

}

},

beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。



 },

created:function (){

 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

},

 beforeMount:function (){

},
mounted(){
      window.onresize=()=>{
     this.width = document.body.clientWidth/5
     this.height = document.body.clientHeight/6
  }
    this.Chart()
},

methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。
Chart(){
          // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

// 基于准备好的dom，初始化echarts实例
// eslint-disable-next-line no-unused-vars
var myChart = this.echarts.init(document.getElementById('RadarGraphic'));
    //    this.autoHeight = myChart.length * 35 + 50; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
          myChart.resize({height:this.height,width:this.width});
// 绘制图表

myChart.setOption({
    
  

    tooltip: {
        trigger: 'axis'
    },
           grid: {
        left: 'center',
        right: '0%',
        buttom: '0%',
        containLabel: true
    },
    // legend: {
    //     left: 'center',
    //     data: [ '某主食手机', '某水果手机']
    // },
    radar: [
   
        {
            indicator: [
                {text: '外观', max: 100},
                {text: '拍照', max: 100},
                {text: '系统', max: 100},
                {text: '性能', max: 100},
                {text: '屏幕', max: 100}
                
            ],
            radius: 90,
            center: ['50%', '57%'],
                        // eslint-disable-next-line no-dupe-keys
               
                startAngle: 90,  // 雷达图的旋转偏移量
                splitNumber: 5,  // 分层5层，当前最大1000，可理解为每层200
                shape: 'line',
                name: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#595959', // 文字颜色
                        fontSize: 13
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['red','#d5d3ed', '#d5d3ed','#d5d3ed', '#d5d3ed']
                        //圆环颜色
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(128, 128, 128, 0.1)' // 五角内部的连接线颜色
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#595959' // 每个区域的边框颜色
                    }
                }


        },
    
    ],
    
    series: [
       {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            areaStyle: {},
            data: [
                {
                    value: [60, 100, 85, 40,20],
                    name: '某主食手机',
                            lineStyle: { // 五点连接线的样式。
                        normal: {
                            opacity: 1, // 图形透明度,
                            color: '#1F6AFB'
                        }
                    },
                    itemStyle: { // 单个拐点标志的样式设置。
                        normal: {
                            borderColor: '#1F6AFB',
                            // 拐点的描边颜色。[ default: '#000' ]
                            borderWidth: 1,
                            // 拐点的描边宽度，默认不描边。[ default: 0 ]
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(128, 328, 128, 0.3)' // 五点连接后形成的区域颜色: 透明色
                        }
                    }

                
                },
                {
                     value: [60, 10, 85, 40,20],
                    name: '某水果手机' ,
                            lineStyle: { // 五点连接线的样式。
                        normal: {
                            opacity: 1, // 图形透明度,
                            color: '#1F6AFB'
                        }
                    },
                    itemStyle: { // 单个拐点标志的样式设置。
                        normal: {
                            borderColor: '#1F6AFB',
                            // 拐点的描边颜色。[ default: '#000' ]
                            borderWidth: 1,
                            // 拐点的描边宽度，默认不描边。[ default: 0 ]
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'skyblue' // 五点连接后形成的区域颜色: 透明色
                        }
                    }

                }
                
              
            ],
          

        }
  
        

  
    ],
       // 高亮样式。
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色。
                color: 'pink'
            }
         
        }
 
})
}


}

}

</script>

<style lang='scss' scope>
.AxisFrom {
    // width: 100%;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
        background-color: #fff;
  
}
.RadarGraphic {
    max-width: 400px;
    max-height: 400px;
    background-color: #fff;


  
}
</style>
